<template>
    <!-- 数据行 -->
    <div id="muke-fileListRow" v-bind:file="file" v-bind:index="index" 
            @mouseover="showOtherOperate(index,file)"
            @mouseout="hiddenOtherOperate(index,file)" >
            
        <!-- 图标 -->
        <div id="file-icon">
            <!-- 文件图标 -->
            <fileIcon id="icon" :file="file"></fileIcon>
        </div>

        <!-- 文件名 -->
        <div id="muke-file-name" v-bind:title="file.filename" @click="enterFolder(file)">
            <div id="file-props"><i class="el-icon-more"></i></div>
            <span v-on:title="file.name">{{file.name}}</span>
        </div>
        <!-- 文件大小 -->
        <div id="muke-file-size">
            <span class="file-size">{{file.fileSize}}</span>
            <div class='other' @click="editName(file)" ><i class="el-icon-edit"></i></div>
            <div style="display:none; float:left;">&nbsp;&nbsp;&nbsp;</div>
            <div class="download" @click="download(file)" ><i class="el-icon-download"></i> </div> 
        </div>
        <!-- 创建时间 -->
        <div id="muke-file-date">
            <span>{{file.updateTime}}</span>
        </div>
    </div>
</template>
<script>
    
    import fileIcon from '../icons/file-icon';
    import util from '../../utils/util';
    import EventBus from '../../utils/event-bus';
    
    export default {
        props:['file','index'],
        components:{
            fileIcon
        },
        methods:{
            /**
             * 文件下载
             */
            download(file){
                location.href = util.API_HOST+'/file/file/download/file?id='+file.id;
                // this.$axios.post(
                //     util.API_HOST+'/file/file/download/file',
                //     {id:file.id},
                //     {responseType:'blob'}
                // ).then(response => {
                //     let result = response.data;
                //     // 处理下载的文件流
                //     util.handleDownload(result,file);

                // }).catch(err => {
                //     this.$notify.error({
                //         title:'下载错啦',
                //         message:err.message
                //     })
                // });
            },
            /**
             * 修改名称[文件或文件夹]
             */
            editName(file){
                const filename = file.name;
                let prefix = filename;
                let type = '文件夹';
                let suffix = '';
                if (file.type === 'file'){
                    type = file.fileType;
                    prefix = filename.substring(0,filename.lastIndexOf('.'));
                    suffix = filename.substring(filename.lastIndexOf('.'),filename.length);
                }
                this.$prompt('文件类型 : '+type,'重命名', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue:prefix,
                    inputErrorMessage: '请勿输入非法字符',
                    inputValidator:function(obj){
                        if (obj === '') return '名称不能为空';
                        return !util.validateStr(obj);
                    }
                    }).then(({ value }) => {
                        this.$axios.post(util.API_HOST+'/file/file/update/name',{
                            id:file.id,
                            name:value+suffix,
                            type:file.type
                        }).then(response => {
                            if(response.data.code === 200){
                                file.name = value+suffix;
                                this.$message({
                                    type: 'success',
                                    message: '重命名成功'
                                });
                                return;
                            } 
                            this.$message({
                                    type: 'error',
                                    message: '重命名失败'
                                });
                        }).catch(err => {
                            console.log(err);
                        });
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                    });       
                });
            },
            // 鼠标移上去，显示其他的操作
            // 编辑名称，查看文件或文件夹属性
            showOtherOperate(index,file){
                let div = document.querySelectorAll('#muke-fileListRow');
                let sizeEle = div[index].children[2];
                sizeEle.children[0].style.display = 'none';
                sizeEle.children[1].style.display = 'block';
                if (file.type === 'file'){
                    sizeEle.children[2].style.display = 'block';
                    sizeEle.children[3].style.display = 'block';
                }
            },
            // 隐藏行操作
            hiddenOtherOperate(index,file){
                let div = document.querySelectorAll('#muke-fileListRow');
                let sizeEle = div[index].children[2];
                sizeEle.children[0].style.display = 'block';
                sizeEle.children[1].style.display = 'none';
                // if(file.type === 'file'){
                    sizeEle.children[2].style.display = 'none';
                    sizeEle.children[3].style.display = 'none';
                // }
            },
            /**
             * 点击文件夹进入文件夹
             */
            enterFolder(file){
                // 清空选中的文件数据
                EventBus.$emit('clearSelectFiles',true);
                if (file.type === 'file'){
                    return;
                }
                // 保存当前文件夹id
                util.currentFolderId = file.id;
                let fid = document.getElementById('changeId');
                fid.value  = file.id;
                fid.dispatchEvent(new Event('input'));
                this.$axios.post(util.API_HOST+'/file/folder/query',{
                    pid :file.id
                }).then(response => {
                    let result = response.data;
                    if (result.code === 200){
                        this.$emit('handleChildrenData',result.data);
                        // 修改文件列表标题
                        let title = document.getElementById('muke-file-title');
                        let back = document.getElementById('muke-back-folder');
                        title.innerHTML =  file.name;
                        back.innerHTML = '<i class="el-icon-back"/> ';
                        util.parentFolderId = file.pid; 
                    }
                }).catch(err => {
                    this.$message.error(err.message);
                })
            },
            showProp(){
                document.getElementById('file-props').style.display = 'block';
            }
        }
        
    }
</script>
<style scoped>
    .other{
        display: none;
        float: left;
    }
    .download{
        display: none;
    }
    .other:hover{color: #409EFF}
    .download:hover{color: #409EFF}
    #file-checkbox{
        float: left;
        width: 30px;
        padding-top: 20px;padding-left: 5px;
    }
    #icon{
        width: 40px;
        height: 40px;
    }
    #file-icon{
        padding-top: 10px;
        padding-left: 10px;
        float: left;
        line-height: 60px;
        
    }
    #muke-file-name{
        float: left;
        margin-left: 10px;
        margin-right: 10px;
        width: 40%;height: 60px;
        overflow: hidden;
        line-height: 60px;
        font-family: Poppins;
        font-size: 15px;
        position: relative;
    }
    #muke-file-name:hover{
        color: #409EFF;
    }
    #file-props{
        position: absolute;
        left: 200px;
        /* width: 20px;height: 16px; */
        display: none;
        background-color: azure;
    }
    #muke-file-size{
        float: left;
        width: 25%;
        line-height: 60px;
        font-family: Poppins;
        font-size: 15px;
    }
    #muke-file-date{
        width: 20%px;min-width: max-content;
        font-family: Poppins;
        font-size: 15px;
        line-height: 60px;
    }
    #muke-fileListRow:hover{
        background-color: #EBEEF5;
        cursor: pointer;
    }
    #muke-fileListRow{
        height: 60px;
        width: 100%;
        border-radius: 5px;
    }
</style>